<template>
  <div class="form1">
    <!--普通的input控件是不支持直接v-model:value=""的绑定的-->
    <el-input v-model="input" placeholder="请输入内容" :disabled="disabled1" clearable show-password></el-input>
    <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"></el-input>
    <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2"></el-input>
    <el-input
      type="textarea"
      :autosize="textarea2_autosize"
      placeholder="请输入内容"
      v-model="textarea2"
    ></el-input>

    <el-input placeholder="请输入内容" v-model="input3">
      <template slot="prepend">Http://</template>
      <template slot="append">.com</template>
    </el-input>
    <!--带有select框的输入框无法显示选择？？？？？-->
    <el-input placeholder="请输入内容" v-model="input4" class="input-with-select">
      <el-select v-model="select" slot="prepend" placeholder="请选择">
        <el-option label="餐厅名" value="1"></el-option>
        <el-option label="订单号" value="2"></el-option>
        <el-option label="用户电话" value="3"></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>

    <el-row class="demo-autocomplete">
      <el-col :span="12">
        <div class="sub-title">激活即列出输入建议</div>
        <el-autocomplete
          class="inline-input"
          v-model="state1"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
      <el-col :span="12">
        <div class="sub-title">输入后匹配输入建议</div>
        <el-autocomplete
          class="inline-input"
          v-model="state2"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
    </el-row>
    <!--只要querysearch返回对应格式的数据即可-->
    <el-input type="text" placeholder="请输入内容" v-model="text" maxlength="10" show-word-limit></el-input>
    <div style="margin: 20px 0;"></div>
    <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="30" show-word-limit></el-input>
    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
  </div>
</template>
<script>
export default {
  name: "Form1",
  components: {},
  data: function() {
    return {
      input: "",
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      disabled1: false,
      textarea2: "",
      //   textarea2_autosize: { minRows: 2, maxRows: 4 }
      textarea2_autosize: {},
      select: "",
      state1: "",
      state2: "",
      rests: [],
      text: "",
      textarea: "",
      num:null
    };
  },
  methods: {
    //此处的querySearch获取数据的来源可以是多种，可以从服务端获取
    querySearch(queryString, cb) {
      var rests = this.rests;
      var results = queryString
        ? rests.filter(this.createFilter(queryString))
        : rests;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          //字符串的indexOf()方法返回第一个 字符串在第二个字符串出现的位置
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号"
        },
        {
          value: "新旺角茶餐厅",
          address: "上海市普陀区真北路988号创邑金沙谷6号楼113"
        },
        { value: "NONO JUICE  鲜榨果汁", address: "上海市长宁区天山西路119号" }
      ];
    },
    handleSelect(item) {
      // 默认行为会将item对象的vallue传入
      // this.state1=item.address
      console.log(item);
    }
  },
  mounted() {
    this.rests = this.loadAll();
  }
};
</script>
<style scoped>
.form1 {
  text-align: center;
  width: 600px;
}
</style>